<!--
 * @Author: ckk
 * @Date: 2022年7月19日14:41:30
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-08-23 15:59:32
 * @Description: 消息列表
 * @version: 1.0
-->
<template>
  <div class="home flexBox">
    <div class="nav">
      <yj-mob-icon name="arrow-left" color="rgba(0,0,0,1)" size="17px" @click="goback()"/>
      <div class="nav-title">消息通知</div>
    </div>
    <div class="remind-main">
      <yj-mob-list
        v-model="loading"
        :finished="finished"
        finished-text="超过2个月的消息不再显示"
        @load="onLoad"
      >
      <div class="information-item" v-for="(item, index) in list" :key="index">
        <div class="information-time">{{item.send_at}}</div>
        <div class="information-content">
          <img src="../../assets/images/message/xiaoyou.png" alt="">
          <div class="message">
            <p class="assistant">小优助手</p>
            <div class="message-content">
              <p class="message-name">{{item.title}}</p>
              <p class="message-main">{{item.content}}</p>
              <div class="look-up">
                <button @click="JumpUrl(item.url)">立即查看</button>
                <yj-mob-icon name="arrow" color="#29C07B" size="12px"/>
              </div>
            </div>

          </div>
        </div>
      </div>
      </yj-mob-list>
    </div>
  </div>
</template>

<script>
import YouXin from 'youxin-js-sdk';
import { Icon, List, Toast } from 'yj-mob-ui';
import { informationServices } from '@/api';
export default {
  components: {
    [List.name]: List,
    [Toast.name]: Toast,
    [Icon.name]: Icon
  },
  data () {
    return {
      loading: false,
      finished: false,
      list: [],
      size: 10,
      msgType: '2,3,5,6,7,8,9,10,11,12,4',
      page: 0
    };
  },
  created () {
  },
  methods: {
    goback () {
      if (this.$route.query.isGo === '1') {
        this.$router.go(-1);
      } else {
        YouXin.closeWindow();
      }
    },
    /**
     * @author: ckk
     * @description: 加载
     * @return {*}
     */
    async onLoad () {
      const dataList = await this.getList();
      this.loading = false;
      this.list = this.list.concat(dataList);
      if (dataList.length < this.size) {
        this.finished = true;
      } else {
        this.page++;
      }
    },
    /**
     * @author: ckk
     * @description: 获取消息列表
     * @return {*}
     */
    async getList () {
      const params = {
        sendUxin: '1',
        msgType: this.msgType,
        page: this.page,
        size: this.size
      },
      res = await informationServices.getInformationList(params);
      if (res.code === 200) {
        return res.data;
      } else {
        return [];
      }
    },
    /**
     * @author: ckk
     * @description:跳转链接
     * @param {*} url
     * @return {*}
     */
    JumpUrl (url) {
      if (url.indexOf('https://') !== -1 || url.indexOf('http://') !== -1) {
        YouXin.openWindow({
          url: url, // 网页地址
          title: '' // 标题名称
        });
      } else if (url.indexOf('vcom-area://') !== -1) {
        const newUrl = url.split('://')[1];
        YouXin.openWindow({
          url: location.origin + newUrl, // 网页地址
          title: '' // 标题名称
        });
      } else if (url.indexOf('vcom://') !== -1) {
        this.$toast('暂无跳转链接');
      } else {
        YouXin.openWindow({
          url: location.origin + url, // 网页地址
          title: '' // 标题名称
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.flexBox{
  display: flex;
  flex-direction: column;
}
.nav{
  width:100%;
  position: relative;
  padding:20px 0;
  display: flex;
  flex-shrink: 0;
  i{
    width:20px;
    height:20px;
    position: absolute;
    left:17px;
    top:22px;
  }
  .nav-title{
    width:100%;
    text-align: center;
    font-size: 20px;
    font-family: PingFang SC-Medium, PingFang SC, sans-serif;
    font-weight: 500;
    color: #000000;
  }
}
.remind-main{
  width:100%;
  height: 100%;
  overflow-y: auto;
  background: #EFEFEF;
  padding:0 12px;
  box-sizing: border-box;
}
.information-time{
  width: 111px;
  height: 26px;
  background: #FFFFFF;
  border-radius: 26px;
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  line-height: 26px;
  text-align: center;
  margin: 16px auto 6px auto;
}
.information-content{
  display: flex;
  img{
    width:48px;
    height: 48px;
    display: block;
    margin-right: 12px;
  }
  .assistant{
    font-size: 10px;
    font-weight: 400;
    color: #999999;
    line-height: 26px;
  }
  .message-name{
    font-size: 14px;
    font-weight: 800;
    color: #333333;
    line-height: 26px;
  }
  .message-main{
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
  }
  .message-content{
    width:280px;
    height: auto;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.05);
    box-sizing: border-box;
    padding: 12px 14px;
  }
  .look-up{
    border-top: 1px solid #E4E4E4;
    margin-top:10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top:10px;
    button{
      font-size: 12px;
      font-weight: 400;
      color: #29C07B;
      border: none;
      background: #fff;
    }
  }
}
</style>
